<template>
  <div class="app-container">
    <el-button type="primary" @click="handleCreate">New Role</el-button>

    <el-table
      :data="roles"
      fit
    >
      <el-table-column
        label="Role Key"
        prop="roleKey"
      ></el-table-column>

      <el-table-column
        label="Role Name"
        prop="role"
      ></el-table-column>

      <el-table-column
        label="Description"
        prop="desc"
      ></el-table-column>

      <el-table-column
        label="Operations"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
      <el-form :model="role" label-width="80px" label-position="left">
        <el-form-item label="RoleKey">
          <el-input v-model="role.roleKey" placeholder="Role Key"></el-input>
        </el-form-item>
        <el-form-item label="Name">
          <el-input v-model="role.role" placeholder="Role Name" />
        </el-form-item>
        <el-form-item label="Desc">
          <el-input
            v-model="role.desc"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="Role Description"
          />
        </el-form-item>
        <el-form-item label="Menus">
          <el-tree
            ref="tree"
            :data="routes"
            :props="defaultProps"
            show-checkbox
            node-key="path"
            class="permission-tree"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
        <el-button type="primary" @click="confirmRole">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils'

const defaultRole = {
  roleKey: '',
  role: '',
  desc: ''
}

export default {
  data() {
    return {
      roles: [
        {
          'roleKey': 'meter',
          'role': '水表管理员',
          'desc': '水表管理员描述'
        },
        {
          'roleKey': 'monitor',
          'role': '环境监测员',
          'desc': '环境监测员描述'
        },
        {
          'roleKey': 'installer',
          'role': '安装人员',
          'desc': '安装人员描述'
        },
        {
          'roleKey': 'root',
          'role': 'ROOT',
          'desc': '超级管理员'
        }
      ],
      role: Object.assign({}, defaultRole),
      routes: [
        {
          id: 1,
          label: 'Admin'
        },
        {
          id: 2,
          label: 'Devices'
        },
        {
          id: 3,
          label: 'Monitoring'
        },
        {
          id: 4,
          label: 'Area Usage'
        },
        {
          id: 5,
          label: 'Notification'
        }
      ],
      rolesList: [],
      dialogVisible: false,
      dialogType: 'new',
      defaultProps: {
        children: 'children',
        title: 'label'
      }
    }
  },

  methods: {
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.role = deepClone(scope.row)
    },
    handleCreate() {
      this.dialogType = 'new'
      this.dialogVisible = true
      this.role = defaultRole
    },
    handleDelete(scope) {

    },
    confirmRole() {

    }
  }
}
</script>

<style>

</style>
